<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%;margin-top:20px" size="small">
      <el-table-column
        prop="title"
        label="名称"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="head_img" label="封面图" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.head_img"
            :preview-src-list="[scope.row.head_img]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="school_id" label="驾校" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="apply_type"
        label="申领类型"
        show-overflow-tooltip
      ></el-table-column>
       <el-table-column
        prop="price"
        label="班型原价"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="cost"
        label="班型费用"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="pay_type"
        label="付款方式"
        show-overflow-tooltip
      ></el-table-column>
    
      <el-table-column
        prop="approval_user"
        label="审核人"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="statusText"
        label="状态"
        show-overflow-tooltip
      >
          <template slot-scope="scope">
          <span :style="{'color':scope.row.statusColor}">{{scope.row.statusText}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="editItem(scope.row)"
            v-if="scope.row.status == 0"
            >审核</el-button
          >
          <el-button type="text" @click="lookItem(scope.row)" v-else
            >查看</el-button
          >
          <el-button type="text" @click="approval(scope.row)">移交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
      value: true,
    };
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    tabData(val) {
      this.tableData = val.list;
      this.pages = val.page;
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("changepageTotal", val);
    },
    handleCurrentChange(val) {
      this.$emit("changepage", val);
    },
    //编辑
    editItem(val) {
      this.$emit("editItem", val);
    },
    //查看
    lookItem(val) {
      this.$emit("lookItem", val);
    },
              //移交
    approval(val) {
      this.$emit("approval", val);
    },
  },
};
</script>

<style scoped lang='scss'>
</style>
